import React from "react";
import "./news-item.scss";
import { useNavigate } from "react-router-dom";

import PropTypes from "prop-types";
function NewsItem(props) {
  const navigate = useNavigate();
  const { item } = props;
  if (!item) return null;

  function handlerDetail(id) {
    navigate("/detail?id=" + id);
  }
  return (
    <div className="news-item-container" onClick={() => handlerDetail(item.id)}>
      <div className="news-info">
        <div className="title">{item.title}</div>
        <div className="author">{item.hint}</div>
      </div>
      <div className="news-cover">
        <img src={item.images[0]} alt="" />
      </div>
    </div>
  );
}

// 属性规则校验;
NewsItem.defaultProps = {
  item: null,
};
NewsItem.propTypes = {
  item: PropTypes.object,
};
export default NewsItem;
